<template>
    <div class="mytab">
        <search></search>
        <van-tabs @change="change" v-model="active">
            <van-tab v-for="item in tabs" :key="item.id" :title="item.name">
                <batch v-for="(item,index) in list" :key="index"></batch>
            </van-tab>
        </van-tabs>

        <div class="menubj">
            <div class="row user">
                <van-checkbox class="checkbox"  v-model="checkAll">全选</van-checkbox> <span>报价人：</span> <input v-model="username" type="text"><span>联系电话：</span><input v-model="phone" type="text">
            </div>
            <div class="row price">
                <span>平均单价：</span> <span class="red">15800</span> <span>自提价：</span><input v-model="username" type="text"><span>到厂价：</span><input v-model="phone" type="text">
            </div>
            <ul class="btns">
                 <li @click="selIndex=0" :class="{'active':selIndex==0}">
                     平台调拨资源 <h2></h2>
                 </li>
                 <li  @click="selIndex=1"   :class="{'active':selIndex==1}">
                     公司自有资源 <h2></h2>
                 </li>
                 <li>
                     <div class="btn">报价</div>
                 </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import batch from '@/components/demandBJ'
    import search from '@/components/search'
    export default {
        components: {
            batch,search
        },
        data() {
            return {
                checkAll:false,
                username:'张大山',
                phone:'12388273771',
                tabs: [{
                    name: '新疆棉',
                    id: 1
                }, {
                    name: '地产棉',
                    id: 2
                }, {
                    name: '进口棉¥',
                    id: 3
                }, {
                    name: '进口棉$',
                    id: 4
                }, {
                    name: '拍储棉',
                    id: 5
                }],
                active: 2,
                list: [],
                showBJ:false,
                selIndex:0
            }
        },
        
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getParams(vm);
            })
        },
        methods: {
            change(index) {
                this.list = [];
                for (let i = 0; i < index + 1; i++) {
                    this.list.push({
                        name: ''
                    });
                }
            },
            getParams(vm) {
                this.showBJ =vm.$route.params.showBJ;            }
        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            '$route': 'getParams'
        },
        created() {
            this.change(2);
        }
    }
</script>

<style scoped lang='less'>
    .mytab {
        .van-tab--active {
            color: #fff !important;
        }
    }
    .menubj{
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #f2f2f2;
        .btns{
            background: #fff;
            height: 3em;
            line-height: 3em;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            .active{
                h2{
                    display: block !important;
                }
                color: orangered;
                border-color:#fff !important;
            }
            li{
                flex: 1;
                position: relative;
                
                border: 1px solid #f2f2f2;
                h2{
                    position: absolute;
                    bottom: 0px;
                    left: 3%;
                    height: 2px;
                    width: 94%;
                    background: orangered;
                    display: none;
                }
            }
            .btn{
                background: #0099CC;
                color: #fff;
            }
        }
        .row{
            text-align: left;
            background: #fff;
            font-size: 14px;
            padding: 0.5em 5px;
            border-bottom: 1px solid #f2f2f2;
            .checkbox{
                position: relative;
                display: inline;
                 
            }
            
        }
        .user{
            input{
                width: 6em;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
        }
        .price{
            input{
                width: 4em;               
                border: 1px solid #ccc;
                outline: 0;
                color: orangered;
            }
        }
    }
</style>